<template>
  <div class="any">
    <div class="title">抱歉 !</div>
    <div class="description">您访问的页面不存在..</div>
    <n-button class="back" strong secondary type="success" size="small" @click="$router.replace('/')">前往首页</n-button>
  </div>
</template>

<script setup lang="js">
import { useRouter } from 'vue-router'
const $router = useRouter()
</script>

<style scoped lang="scss">
.any {
  width: 100%;
  height: 100%;
  background: #F3F9F1;
  /* 使用flex布局 */
  display: flex;
  /* 水平居中 */
  flex-direction: column;
  /* 垂直居中 */
  // justify-content: center;
  /* 内容居中 */
  align-items: center;
  padding-top: 100px;

  .title {
    font-size: 20px;
  }

  .description {
    margin-top: 10px;
    font-size: 15px;
  }

  .back {
    margin-top: 25px;
  }
}
</style>